<template>
    <div class="submitTable">
        <el-table :data="optionsData" border stripe style="width: 100%;" max-height="740">
            <el-table-column v-for="(item, index) in tableHeader" :key="index" :label="item.label" :width="item.width">
                <template slot-scope="scope">
                    <el-date-picker v-if="item.type=='time'" :data-times='scope.row[item.prop]' v-model="scope.row[item.prop]" type="date" placeholder="选择日期" disabled></el-date-picker>
                    <div class="txt" tabindex='0' v-else @focus="textfocus(scope,item)" @blur="textBlur(scope,item)" disabled :style="{'height': scope.row.bool? 'auto': '40px'}">
                        <router-link v-if ="item.router" :to="{path: item.router, query: {id: scope.row.id}}" @click.native="handClick(scope.row.id)">{{Array.isArray(scope.row[item.prop])? (scope.row[item.prop]).join(' '): scope.row[item.prop]}}</router-link>
                        <p v-else>{{Array.isArray(scope.row[item.prop])? (scope.row[item.prop]).join(' '): scope.row[item.prop]}}</p>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagebar v-if="showPagebar" :curPage="cur" :pageSize="pageSize" :layout="layout" :total="pageNum" :gridRefresh="gridRefresh" @pageChange="pageChange"></pagebar>
    </div>
</template>

<script>
export default {
    name: 'submitTable',
    data() {
        return {
            optionsData: [],
            cur: this.curPage
        }
    },
    props: {
        curPage: {
            default: 1
        },
        pageSize: {
            default: 10
        },
        tableHeader: Array,     // tableHeader: 表格头; 
        options: Array,         // options: 表格列表
        pageNum: Number,
        layout: {
            default: 'prev, pager, next, total, slot'
        },
        gridRefresh: Boolean,
        showPagebar: {  // 是否显示 pagebar
            default: true
        }
    },
    watch: {
        options() {     // 给 options 行添加 bool 值实现伸展功能。
            if(this.options) {
                this.optionsData = JSON.parse(JSON.stringify(this.options));
                this.optionsData.map((item,index)=> {
                    this.$set(item, 'bool', false)
                })
            } else {
                this.optionsData = this.options;
            }
        }
    },
    methods: {
        textfocus(scope,item) { // 伸缩表格
            scope.row.bool = true;
        },
        textBlur(scope,item) {
            scope.row.bool = false;
        },
        pageChange(num, size) { // 切换 pagebar
            this.cur = num;
            this.pageSize = size;
            this.$emit('pageChange', num, size)
        },
        handClick(id) {
            console.log('id=' + id)
            this.$emit('handClick', id)
        }
    },
    created(){
        // 格式化数据
        
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.submitTable {
    
    .txt{
        white-space: pre-wrap;
        line-height: 20px;
    }
    td{
        vertical-align: top;
    }
    .el-table {
        margin-bottom: 20px;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
}
</style>